<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>骨架屏</title>

  <style>
    :root {
      --loading-grey: #ededed;
    }

    h4,
    p {
      margin: 10px 0;
    }

    .card-body {
      width: 600px;
      padding: 20px;
      border: 1px #efefef solid;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }

    .card {
      width: 250px;
      height: 280px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0px 0px 6px 0 #d8d8d8;
    }

    .card .image {
      width: 100%;
      height: 160px;
      overflow: hidden;
    }

    .card .image img {
      width: 100%;
      object-fit: cover;
    }

    .card .content {
      padding: 5px 15px;
    }


    .loading .image,
    .loading h4,
    .loading .desc {
      background: linear-gradient(100deg,
          rgba(255, 255, 255, 0) 40%,
          rgba(255, 255, 255, .5) 50%,
          rgba(255, 255, 255, 0) 60%) var(--loading-grey);
      background-size: 200% 100%;
      background-position-x: 180%;
      min-height: 1.6rem;
      animation: 1s loading ease-in-out infinite;
    }

    .loading h4 {
      min-height: 1.6rem;
      border-radius: 4px;
      animation-delay: .05s;
    }

    .loading .desc {
      min-height: 3rem;
      border-radius: 4px;
      animation-delay: .06s;
    }

    @keyframes loading {
      to {
        background-position-x: -20%;
      }
    }
  </style>
</head>

<body>
  <div class="card-body">
    <div class="card">
      <div class="image">
        <img src="./01.jpeg" alt="image">
      </div>
      <div class="content">
        <h4 class="title">酸辣粉</h4>
        <p class="desc">
          好吃不贵酸辣粉
        </p>
      </div>
    </div>

    <div class="card loading">
      <div class="image">

      </div>
      <div class="content">
        <h4 class="title"></h4>
        <p class="desc">

        </p>
      </div>
    </div>
  </div>
</body>

</html>